<template>
  
    <div class="kuai" v-if="kuai">
      <div class="img"><img class="img"
          mode="widthFix"
          :src="kuai.img"
          @click="showimg(kuai.img)"
        /></div>
      <div class="text" @click="showitem(kuai.id)">
        <div class="text0">{{kuai.patron}} 赞助</div>
        <div class="text1">{{kuai.name}}</div>
        <div class="text2">{{kuai.opentime}} 开始瓜分</div>
        <div class="text2">有 {{kuai.count}} 双眼睛在盯着</div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    kuai: {
      default: {
        id: 12,
        patron: '成都黑眼圈',
        img: 'https://img10.360buyimg.com/imgzone/jfs/t28276/91/319591167/610868/5b2da01/5befc342Nbc5c1f5d.jpg',
        name: '瓜分500元红包',
        opentime: '11月27日 18:00',
        count: 1000
      }
    }
  },
  methods: {
    showimg (img) {
      wx.previewImage({
        current: img, // 当前显示图片的http链接
        urls: [img] // 需要预览的图片http链接列表
      })
    },
    showitem (id) {
      console.log('查看项目详细:' + id)
    }
  }
}
</script>
<style lang="scss" scoped>

  .kuai{
    padding:40rpx 20rpx;
    display: flex;
    border-top: 1px solid #f1f1f1ef;

    .img{
        width:180rpx;
    }
    .text{
      padding-left:30rpx;
      line-height:120%;
    }
    .text0{
      font-size:30rpx;
      color:rgb(221, 7, 7);
      font-weight: bold;
    }
    .text1{
      font-size: 32rpx;
      color: rgba(0,0,0,0.8);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .text2{
        font-size: 24rpx;
        letter-spacing: .3rpx;
        color: #808080;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    }


</style>
